/*
 *人员管理页面文件
 */
'use strict';
import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import {regionArray, endexData} from '@app/constants/DataSource.jsx';
import { Row, Col, Form, Button, Icon, Card, Breadcrumb, Input, Spin, Table, Select } from 'antd';
import './UserManage.css';
import $ from 'jquery';
const FormItem = Form.Item;
const Option = Select.Option;

class UserManage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading:true,
      dataSource:[],
      name:'',
      tel:'',
      position:-1
    };
  }

  componentDidMount(){
    setTimeout(() => {
    this.setState({loading:false});
    let dataSource = [];
    $.get('http://localhost:3000/userList',(json) =>{
        if(json.status === '0'){
          dataSource = json.data;
          dataSource.map(value => {
            value.key = value.user_id;
          })
          this.setState({dataSource});
        }
    }); 
    },300);
  }

  handleSearch = () =>{
    let dataSource = [];
    let dataSearch = [];
    $.get('http://localhost:3000/userList',(json) =>{
        if(json.status === '0'){
          dataSource = json.data;
          dataSource.map(value => {
            value.key = value.user_id;
          });
          dataSource.map(value => {
            if(this.state.tel === '' || value.tel === this.state.tel){
              if(this.state.name === '' || value.name === this.state.name){
                if(this.state.position === -1 || value.position === this.state.position){
                  dataSearch.push(value);
                }
              }
            }
          });
          this.setState({dataSource:dataSearch});
        }
    });   
  }
   
  render() {  
    const columns = [{
      title: '姓名',
      dataIndex: 'name',
    }, {
      title: '队伍编号',
      render:record => {
        return(
          <span>ZHS-0{record.depament}</span>
        )
      }
    }, {
      title: '手机号码',
      dataIndex: 'tel',
    }, {
      title: '地区',
      render:record => {
        let title = '';
        if(record.depament === '1')title = '生活区A区';
        if(record.depament === '2')title = '生活区B区';
        if(record.depament === '3')title = '生活区C区';
        if(record.depament === "4")title = '商业区A区';
        if(record.depament === '5')title = '商业区B区';
        return(
          <span>{title}</span>
        )
      }
    },{
      title: '职位',
      render:record => {
        let title = '';
        if(record.position === '1')title = '系统管理员';
        if(record.position === '2')title = '分析员';
        if(record.position === '3')title = '项目管理员';
        if(record.position === "4")title = '财务';
        if(record.position === '5')title = '净化员';
        if(record.position === '6')title = '其他';
        return(
          <span>{title}</span>
        )
      }
    }];

    return (
      <div className = 'workbench'>
        <Row gutter = {16}>
          <Col span = {24}>
            <Card loading = {this.state.loading}>
              <Breadcrumb>
                <Breadcrumb.Item><Link to='/Analysis'>首页</Link></Breadcrumb.Item>
                <Breadcrumb.Item>人员列表</Breadcrumb.Item>
              </Breadcrumb>
              <Form
                className='ant-advanced-search-form'
              >
                <Row>
                  <Col span = {24} style = {{paddingTop:30,textAlign:'center'}}>
                    <Col span={7}>
                      <FormItem label='职位'>
                        <Select defaultValue={-1} style={{ width: 200 }} onChange = {(e) => this.setState({position:e})}>
                          <Option value={-1}>全部</Option>
                          <Option value='1'>系统管理员</Option>
                          <Option value='2'>分析员</Option>
                          <Option value='3'>项目管理员</Option>
                          <Option value='4'>财务</Option>
                          <Option value='5'>净化员</Option>
                          <Option value='6'>其他</Option>
                        </Select>
                      </FormItem>
                    </Col>
                    <Col span={7}> 
                      <FormItem label='姓名' >
                        <Input placeholder='请输入姓名' style={{ width: 200 }} onChange = {(e) => this.setState({name:e.target.value})}/>
                      </FormItem>
                    </Col>
                    <Col span={7}>
                      <FormItem label='手机号码'>
                        <Input placeholder='请输入手机号码' style={{ width: 200 }} onChange = {(e) => this.setState({tel:e.target.value})}/>
                      </FormItem>
                    </Col>
                    <Col span={3} style = {{paddingTop:5}}>
                      <Button type='primary' onClick = {this.handleSearch} >搜索</Button>
                    </Col>
                  </Col>
                  </Row>
                </Form>
              <Table dataSource={this.state.dataSource} columns={columns} />
            </Card>
          </Col>
         </Row>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
   
  }
}
export default connect(
  mapStateToProps, {
    
  }
)(UserManage)
